<!DOCTYPE html>
<html  style="height: 100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Redis服务器信息</title>

<link href="${basePath}/css/museui/reset.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/css/museui/icons.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/css/museui/stylesheet.css" rel="stylesheet" type="text/css" />
<#include "/common/bootstrap.html">
<script type='text/javascript' src='${basePath}/js/museui/actions.js'></script>
<!--[if lte IE 6]>
<script src="${basePath}/js/museui/ie6png.js" type="text/javascript"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix('img, .icon,.isw-archive,.isw-chat,.isw-graph,.isw-grid,.isw-list,.isw-text_document,.isw-zoom,.text');
    </script>
<![endif]--> 
<style type="text/css">
	P{
		text-align: left;
	}
</style>
<script type="text/javascript">
	function getValue(key,type){
		$.ajax({
			   type: "POST",
			   url: "${basePath}/command/key/getValue",
			   data: {"key":key,"type":type},
			   dataType:"json",
			   success: function(msg){
					var tabHeader = "<tr>",
					tabHeader = tabHeader.concat("<td>");
					tabHeader = tabHeader.concat("KEY:【" + msg.key + "】 TYPE:【" + msg.type + "】 totalCount: 【" + msg.totalCount + "】");
					tabHeader = tabHeader.concat("</td>");
					tabHeader = tabHeader.concat("</tr>");
					if(msg.type=="string"){
						var tabBody = "<tr>";
						tabBody = tabBody.concat("<td>");
						tabBody = tabBody.concat(msg.value);
						tabBody = tabBody.concat("</td>");
						tabBody = tabBody.concat("</tr>");
					}else if(msg.type=="list" || msg.type == "set" || msg.type == "zset"){
						var tabBody = "";
						if(typeof msg.value == "object"){
							$.each(msg.value,function(index,item){
								tabBody = tabBody.concat("<tr>");
								tabBody = tabBody.concat("<td>");
								try{
									$.each(item,function(key,value){
										tabBody = tabBody.concat("\""+key+"\":\""+value+"\",");
									});
								}catch (e) {
									tabBody = tabBody.concat(item);
								}
								tabBody = tabBody.concat("</td>");
								tabBody = tabBody.concat("</tr>");
							});
							
						}else{
							$.each(msg.value,function(index,item){
								tabBody = tabBody.concat("<tr>");
								tabBody = tabBody.concat("<td>");
								tabBody = tabBody.concat(item);
								tabBody = tabBody.concat("</td>");
								tabBody = tabBody.concat("</tr>");
							});
						}
					}else if(msg.type == "hash"){
						var tabBody = "";
						$.each(msg.value,function(key,value){
							tabBody = tabBody.concat("<tr>");
							tabBody = tabBody.concat("<td>");
							tabBody = tabBody.concat(key);
							tabBody = tabBody.concat("</td>");
							tabBody = tabBody.concat("<td>");
							tabBody = tabBody.concat(value);
							tabBody = tabBody.concat("</td>");
							tabBody = tabBody.concat("</tr>");
						});
					}
					$("#resultTab").empty();
					$("#resultTab").append(tabHeader + tabBody);
			   }
		});
	}
</script>
</head>
<body style="height: 100%;">
	<div align="center">
	<div class="col-md-12">
		<div>
			<div class="alert alert-success" role="alert" id="messageDiv"></div>
		</div>
		<div class="col-md-12">
			<form class="form-inline" action="${basePath}/command/key/keys">
			  <div class="form-group" style="width: 50%;">
			    <div class="input-group" style="width: 100%;">
			      <div class="input-group-addon">KEY</div>
			      <input type="text" name="pattern" class="form-control"  style="width: 100%;" id="key" value="${pattern?if_exists}">
			    </div>
			  </div>
			  <button type="submit" class="btn btn-primary">查&nbsp;&nbsp;&nbsp;&nbsp;询</button>
			</form>
		</div>	
		<div class="col-md-5" style="margin-top: 1%;">
			<table class="table table-bordered table-hover">
				<tr>
					<td colspan="4">总数量：${totalCount?if_exists}</td>
				</tr>
				<tr>
					<th>KEY</th>
					<th>TYPE</th>
					<th>TTL</th>
					<th>操作</th>
				</tr>
				<#if commandKeyDTOs?exists>
					<#list commandKeyDTOs as dto> 
	                   <tr>
	                      <td>${dto.key}</td>
	                      <td>${dto.type}</td>
	                      <td>${dto.ttl}</td>
	                      <td><button class="btn btn-primary" onclick="getValue('${dto.key}','${dto.type}')">查看结果</button></td>
	                   </tr>
	                </#list>
                </#if>
			</table>
		</div>
		<div class="col-md-7" style="margin-top: 1%;" id="resultDiv">
			<table class="table table-bordered table-hover" id="resultTab">
			</table>
		</div>
	</div>
	</div>
</body>
</html>
